/**
 * #info
 *@author        wuwg
 *@createTime    2018/05/16
 *@updateTime    2018/05/16
 *@description   md-toolbar-left component
 */
export default {
  name: 's-md-toolbar-left',
  props: {
    // 是否开启编辑
    editable: {
      type: Boolean,
      default: true
    },
    // 工具栏
    toolbars: {
      type: Object,
      required: true
    },
    d_words: {
      type: Object,
      required: true
    },
    d_emoji: {
      type: Array,
      required: true
    },
    image_filter: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      // [index, file]
      img_file: [[0, null]],
      img_timer: null,
      header_timer: null,
      s_img_dropdown_open: false,
      s_header_dropdown_open: false,
      s_emoji_select_open: false,
      s_img_link_open: false,
      trigger: null,
      num: 0,
      link_text: '',
      link_addr: '',
      link_type: 'link'
    }
  },
  methods: {
    $imgLinkAdd () {
      this.$emit('toolbar-left-addlink', this.link_type, this.link_text, this.link_addr)
      this.s_img_link_open = false
    },
    $toggle_imgLinkAdd (type) {
      this.link_type = type
      this.link_text = this.link_addr = ''
      this.s_img_link_open = true
      this.$nextTick(() => {
        this.$refs.linkTextInput.focus()
      })
      this.s_img_dropdown_open = false
    },
    $imgFileListClick (pos) {
      this.$emit('imgTouch', this.img_file[pos])
    },
    $changeUrl (index, url) {
      this.img_file[index][2] = url
    },
    $imgFileAdd ($file) {
      this.img_file[0][0] = this.num
      this.img_file[0][1] = $file
      this.img_file.unshift([(this.num + 1), null])
      this.num = this.num + 1
      this.$emit('imgAdd', this.img_file[1][0], $file)
      this.s_img_dropdown_open = false
    },
    $imgFilesAdd ($files) {
      // valid means if the image_filter exist.
      const valid = (typeof this.image_filter === 'function')
      for (let i = 0; i < $files.length; i++) {
        if (valid && this.image_filter($files[i]) === true) {
          this.$imgFileAdd($files[i])
        } else if (!valid && $files[i].type.match(/^image\//i)) {
          this.$imgFileAdd($files[i])
        }
      }
    },
    $imgAdd ($e) {
      this.$imgFilesAdd($e.target.files)
    },
    $imgDel (pos) {
      this.$emit('imgDel', this.img_file[pos])
      this.img_file.splice(pos, 1)
      this.s_img_dropdown_open = false
    },
    $imgDelByFilename (filename) {
      var pos = 0
      while (this.img_file.length > pos) {
        if (this.img_file[pos][0] == filename) {
          this.$imgDel(pos)
          return true
        }
        pos += 1
      }
      return false
    },
    $imgAddByFilename (filename, $file) {
      for (var i = 0; i < this.img_file.length; i++) { if (this.img_file[i][0] == filename) return false }
      this.img_file[0][0] = filename
      this.img_file[0][1] = $file
      this.img_file.unshift(['./' + (this.num), null])
      this.$emit('imgAdd', this.img_file[1][0], $file, false)
      return true
    },
    $imgAddByUrl (filename, $url) {
      for (var i = 0; i < this.img_file.length; i++) { if (this.img_file[i][0] == filename) return false }
      this.img_file[0][0] = filename
      this.img_file[0][1] = $url
      this.img_file.unshift(['./' + (this.num), null])
      return true
    },
    $imgUpdateByFilename (filename, $file) {
      for (var i = 0; i < this.img_file.length; i++) {
        if (this.img_file[i][0] == filename) {
          this.img_file[i][1] = $file
          this.$emit('imgAdd', filename, $file, false)
          return true
        }
      }
      return false
    },
    // 工具栏功能图标click-----------------
    $mouseenter_img_dropdown () {
      clearTimeout(this.img_timer)
      this.s_img_dropdown_open = true
    },
    $mouseleave_img_dropdown () {
      const vm = this
      this.img_timer = setTimeout(function () {
        vm.s_img_dropdown_open = false
      }, 200)
    },
    $mouseenter_header_dropdown () {
      clearTimeout(this.header_timer)
      this.s_header_dropdown_open = true
    },
    $mouseleave_header_dropdown () {
      const vm = this
      this.header_timer = setTimeout(function () {
        vm.s_header_dropdown_open = false
      }, 200)
    },
    $clicks (_type) {
      // 让父节点来绑定事件并
      this.$emit('toolbar-left-click', _type)
    },
    $click_header (_type) {
      // 让父节点来绑定事件并
      this.$emit('toolbar-left-click', _type)
      this.s_header_dropdown_open = false
    },
    handleClose (e) {
      this.s_img_dropdown_open = false
    },
    $click_emoji () {
      this.s_emoji_select_open = true
    },
    $add_emoji (_shortpoint) {
      this.$emit('toolbar-left-click', 'emoji', _shortpoint)
      this.s_emoji_select_open = false
    }
  }
}
